<template>


    <div class="type-list">
        <div class="type-item" v-for="(t, i) in types" :key="i">
            <div class="title-box">
                <span class="title">{{ t.typeName }}</span>
                <!-- <span class="more"  @click="domore()">
                    更多
                    <i class="iconfont icon-right"></i>
                </span> -->
                <RouterLink :to=page+t.typeId custom #default="{ navigate }">
                    <span class="more" @click="navigate">
                        更多
                        <i class="iconfont icon-right"></i>
                    </span>
                </RouterLink>
            </div>
            <div class="film-list">
                <FilmItem v-for="film in t.list" :film="film" :key="film.filmId"></FilmItem>
                
            </div>
           
           
        </div>
    </div>

</template>
<script>

import FilmItem from '../components/FilmItem.vue'
import api from '@/film/api'

export default {
    emits: ['updata:page'],
    components: {
        FilmItem,
    },
    data() {
        return {
            page:'/MoreList/',

            types: [

            ],

        }
    },
    methods: {
        domore() {
            this.$emit("updata:page", "MoreList")
        },
        async typestypes() {
            let { data } = await api.loadTypes()
              console.log(data);
            this.types = data
            this.loadfilms()
        },
        async loadfilms() {
            for (let t of this.types) {
                console.log(t);
                let res = await api.loadFilms({
                    tid: t.typeId
                })
                t.list = res.data
                // console.log(t.list, '1111111111');
            }






        }
    },
    created() {
        this.typestypes()
        this.loadfilms()

    }
}
</script>